<template>
	<view>
		<!-- 自定义头部导航栏 -->
		<nav-bar>
			<!-- 未选中插槽 -->
			<template>
				<template slot="left">
					<text slot="left" class="font-md text-primary ml-3" @click="back">取消</text>
				</template>
			</template>
		</nav-bar>
		<!-- 列表组件 -->
		<f-list
			v-for="(item, index) in list"
			:key="index"
			:item="item"
			:index="index"
			@select="emitSelect"
			@click="doEvent(item)"
		></f-list>
		<!-- 保存按钮 -->
		<view
			v-if="checkedCount !== 0"
			class="position-fixed bg-primary flex flex-column justify-center align-center text-white"
			style="bottom: 0;left: 0;right: 0;width: 100%;height: 50px;"
			@click="save"
		>
			<i class="iconfont icon-xiazai"></i>
			保存
		</view>
	</view>
</template>

<script>
import navBar from '@/components/common/nav-bar.vue'
import fList from '@/components/common/f-list.vue'

export default {
	components: {
		navBar,
		fList
	},
	data() {
		return {
			key: '',
			list: []
		}
	},
	onLoad(e) {
		this.authMethod(() => {
			this.key = e.key
			this.getData()
		})
	},
	computed: {
		checkList() {
			return this.list.filter(item => item.checked)
		},
		checkedCount() {
			return this.checkList.length
		}
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		formaList(list) {
			return list.map(item => {
				let type = 'none'
				if (item.isdir == 1) {
					type = 'dir'
				} else {
					type = item.ext.split('/')[0] || 'none'
				}
				return {
					type,
					checked: true,
					...item
				}
			})
		},
		getData() {
			this.$H.get('/share/' + this.key, { token: true }).then(res => {
				this.list = this.formaList(res)
			})
		},
		emitSelect(data) {
			const { index, value } = data
			this.list[index].checked = value
		},
		save() {
			uni.navigateTo({
				url: '../save/save?key=' + this.key
			})
		}
	}
}
</script>

<style></style>
